import React, { useState, useEffect } from 'react';
import { Area } from '@ant-design/charts';

const DemoArea: React.FC = () => {
    const [data, setData] = useState([]);
    useEffect(() => {
        asyncFetch();
    }, []);
    const asyncFetch = () => {
        fetch('https://gw.alipayobjects.com/os/antfincdn/YdLK%24VvSkW/fireworks-sales.json')
            .then((response) => response.json())
            .then((json) => setData(json))
            .catch((error) => {
                console.log('fetch data failed', error);
            });
    };
    const config = {
        title: {
            visible: true,
            text: '基础面积图',
        },
        data,
        xField: 'Date',
        yField: 'scales',
        xAxis: {
            type: 'dateTime',
            tickCount: 5,
        },
    };
    return <Area {...config} />;
};

export default DemoArea;